<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>福田区</title>
	<link rel="stylesheet" type="text/css" href="cs/index.css">
	<link rel="stylesheet" type="text/css" href="cs/home.css">
	<script src="lib/jquery.js"></script>
	<script src="lib/echarts.min.js"></script>
	<script src="js/index.js"></script>
<script>
	pageFlex(3);    //页面适配处理
</script>	
</head>
<body>
	<!-- 底层动画 -->
	<div class="movemain">
		<img src="images/move.png" class="bgimg1">
		<img src="images/a.png" class="bgimg2">
	</div>	
    <!-- 内容区 -->
	<div class="container" id="container">
		<!-- 头部 -->
		<div class="header">
			<div class="head_left">
				<span id="top_time">11 : 20 : 55</span>
				<span id="top_date">星期三 2018年4月25</span>
			</div>
			<div class="head_center">
				<h1>福田区政务服务大数据挖掘分析平台<span id="head_child" style="font-size: 0.26rem;"></span></h1>
			</div>
			<div class="head_right">
				<button class="head_act">大厅主页</button>
				<button onclick="location.href='terminal.html'">自助终端</button>
			</div>
		</div>
		<!-- 数据区 -->
		<div class="body">
			<!-- tem1 三率一数-->
			<div class="temp tem1 SCYL_temp">
				<div class="row1">
					<div class="temp_move_btn"></div>
					<div class="temp_title"><span color1>三率一数</span></div>
				</div>
				<div class="row2">
					<div class="temp_topbar">
						<button class="active"><span color2>今天</span></button>
						<button><span color2>一周</span></button>
						<button><span color2>30天内</span></button>
					</div>
				</div>
				<div class="row3">
					<div class="row3_item">
						<div>
							<span class="span_num">2500</span> <span>50%</span>
						</div>
						<div>
							<span>总网办量</span> <span class="span_lv">总办理率</span>
						</div>
						<div class="span_pro"><span></span></div>
					</div>
					<div class="row3_item">
						<div>
							<span class="span_num">2500</span> <span>50%</span>
						</div>
						<div>
							<span>总办理量</span> <span class="span_lv">总办理率</span>
						</div>
						<div class="span_pro"><span></span></div>
					</div>
					<div class="row3_item">
						<div>
							<span class="span_num">2500</span> <span>50%</span>
						</div>
						<div>
							<span>总全流程办理量</span> <span class="span_lv">总办理率</span>
						</div>
						<div class="span_pro"><span></span></div>
					</div>
				</div>
				<div class="row4 temp_content">
					<div class="con_tit">福田大厅</div>
					<div class="con_map left_top_map"></div>
				</div>
				<div class="row5">
					<div class="row5_left">
						<div>权责清单总事项数</div>
						<span>200</span> 件
					</div>
					<div class="row5_right">
						<div class="sx_zero" before="0次跑动事项" after="100"><span></span></div>
						<div class="sx_one"  before="1次跑动事项" after="100"><span></span></div>
					</div>
				</div>
			</div>
			<!-- tem2 -->
			<div class="temp tem2">
				<div class="tem2_top">
					<div num="1">大厅数量</div>
					<div num="10">街道数量</div>
					<div num="95">社区数量</div>
				</div>
				<div class="temp_move_btn"></div>
				<div class="temp_content">
					<div class="tem2_svg_img_map"></div>
				</div>
				<div class="tem2_center_title">
					<span>福田区 “政务+金融” 一站式直通车</span>
				</div>
			</div>
			<!-- tem3 -->
			<div class="temp tem3">
				<div class="temp_move_btn"></div>
				<div class="temp_content">
					<div class="tem3_row1">
						<div><span style="color: #00FFB5;">236</span><br>今日预约</div>
						<div><span style="color: #00F4FF;">532</span><br>今日完成</div>
						<div><span style="color: #FFF134;">68</span><br>今日未办</div>
						<div><span style="color: #FFA738;">86</span><br>今日取消</div>
					</div>
					<div class="tem3_row2">
						<div class="tem3_row2_left">
							<ul class="tem3_ck_wrap"></ul>

							<script tip="下面js代码作为窗口变化演示使用">
								for(var i=0;i<54;i++){
									var a = Math.random()>0.8?"active":'';
									$('.tem3_ck_wrap').append('<li class="'+a+'"><span>'+(i+1)+'</span></li>')
								}
								setInterval(function(){
									$('.tem3_ck_wrap').find('li').removeClass('active')
									for(var g=0;g<5;g++){
										var k = parseInt(Math.random() * (54 - 0) + 0);
										$('.tem3_ck_wrap li').eq(k).addClass('active')
									}	
								},3000)
							</script>

						</div>
						<div class="tem3_row2_right">
							<div class="tem3_jh_title">呼号信息</div>
							<ul class="tem3_jh_wrap">
								<li>请 <span>10026</span> 到 <span>33</span> 号窗口办理</li>
								<li>请 <span>10026</span> 到 <span>33</span> 号窗口办理</li>
								<li>请 <span>10026</span> 到 <span>33</span> 号窗口办理</li>
								<li>请 <span>10026</span> 到 <span>33</span> 号窗口办理</li>
								<li>请 <span>10026</span> 到 <span>33</span> 号窗口办理</li>
							</ul>							
						</div>
					</div>
					<div class="tem3_row3">
						<div class="tem3_row3_left">
							<div class="tem3_row3_left_map" style="height: 100%"></div>
						</div>
						<div class="tem3_row3_right">
							<div class="tem3_row3_right_map" style="height: 100%"></div>
							<div class="tr3_right_title">今日窗口办件量 TOP5</div>
						</div>
					</div>
				</div>
			</div>

			<!-- tem4 -->
			<div class="temp tem4 SXBL_temp">
				<div class="temp_topbar" id="tem4_topbar">
					<button class="active"><span color2>月办理总量</span></button>
					<button><span color2>办事最多部门TOP5</span></button>
					<button><span color2>最多办理事项TOP5</span></button>
				</div>
				<div class="temp_move_btn"></div>
				<div class="temp_content">
					<div class="title topbar_wrap">
						<button class="active"><span color2>办理率</span></button>
						<button><span color2>办理量</span></button>						
					</div>
					<div style="height: 100%;width: 100%;">
						<div class="left_bottom_map" style="height: 100%;width: 100%;"></div>
					</div>
				</div>
			</div>

			<!-- tem5 -->
			<div class="temp tem5">
				<div class="temp_move_btn"></div>
				<div class="temp_content">
					<div class="tem5_yhwd">
						<div class="tem5_yhwd_title">各银行网点历史办件量</div>
						<div class="tem5_yhwd_map"></div>
					</div>
					<div class="tem5_bjtop5">
						<div class="tem5_bjtop5_title">办件量最多的银行TOP5</div>
						<div class="tem5_bjtop5_map"></div>
					</div>
					<div class="tem5_sxtop5">
						<div class="tem5_sxtop5_title">银行网点热门事项TOP5</div>
						<div class="tem5_sxtop5_map"></div>
					</div>
				</div>
			</div>

			<!-- tem6 -->
			<div class="temp tem6">
				<div class="temp_content tem6_top">
					<ul class="lists_title">
						<li>办理人</li>
						<li>排队号</li>
						<li>取号时间</li>
						<li>取号详情</li>
						<li>排队人数</li>
					</ul>					
					<ul class="lists_item tem6_items">
						<!-- <li>
							<span>123578</span>
							<span>2020-12-11 12:02:22</span>
							<span>取号详情取号详情取号详情取号详情</span>
							<span>12</span>
						</li> -->
					</ul>
					<script tip="演示代码用的">
						for(var i=0;i<7;i++){
							$('.tem6_items').append(
							`
							<li>
							    <span>李四</span>
								<span>123578</span>
								<span>2020-12-11 12:02</span>
								<span>取号详情取号详情取号详情取号详情</span>
								<span>12</span>
							</li>
							`
							)
						}						
					</script>
				</div>
				<div class="temp_content tem6_bottom">
					<div class="temp_move_btn"></div>
					<div class="tem6_bottom_title">
						<div class="tem6_map_tip">
							<span before="234" after="处理完成"></span>
							<span before="234" after="正在办理"></span>
							<span before="234" after="正在等待"></span>
						</div>
						<span class="tem6_map_title">大厅监控</span>
						<span class="tem6_map_num">取号数量： 1234657</span>
					</div>
					<div class="tem6_right_bottom_map"></div>
				</div>
			</div>

			<!-- 遮罩 -->
			<div class="zhezhao"></div>
		</div>
	</div>
</body>
</html>
<script src="js/modal.js"></script>
<script src="js/svgmap.js"></script>
<script src="js/data.js"></script>
<script src="mds/md09.js"></script>
<script src="js/home.js"></script>
<script>
// 排队，取号  列表滚动动画演示
setInterval(function(){
	addItem('ul.tem3_jh_wrap');
	addItem('ul.tem6_items');
},3000)


//导航点击
$(".temp_topbar,.topbar_wrap").find("button").click(function(){
	$(this).siblings().removeClass("active");
	$(this).addClass("active");
})


//模块1： 左上角三速一率
$.left_top_map($('.left_top_map')[0],{})


//模块2： 中间svg 地图
//svgMap.clear()  清除选中状态
var svgMap = $.svgMap(".tem2_svg_img_map",{
	mouseenter:function(cla,event){
		// console.log(this,cla)
		// $.msgtip("sdfsdf") 
	},
	mouseleave:function(cla,event){
		// console.log(this,cla)
		// $.msgtipClose()
	},
	click:function(cla,event){
    	var n = +cla.replace(/[^0-9]*/g,"");
    	$("#head_child").html('('+area[n-1].tit+')');
    	var current = $("div"+cla);
    	var x = parseFloat(current.css("left"));
    	var y = parseFloat(current.css("top"));
    	console.log(x,y);
    	// toggleED(rdm(5,12));  这个页面数据更新

        var arr = area[n-1].child;
        var list = [];
        var links = [];
        var len = arr.length;
        for(var i=0;i<arr.length;i++){
        	links.push({source: i, target: len });
        	list.push({id: i, category: 1, name: arr[i], symbolSize: 30*KO, draggable: "true",itemStyle:{color: '#00ADF8'}});
        }
        list.push({id: len, category: 1, name:"", symbolSize: 30*KO, draggable: "true",itemStyle:{color: 'rgba(255,255,255,0.5)'}});
        var data = { list:list, links:links };
        var box = $("#shequshow");
        MD09.init(box[0],data).on('click',function(v){
        	if(v.name == ''){
        		box.hide();
        	}else{
        		var dd = JSON.parse(JSON.stringify(data));
        		dd.list[v.dataIndex].itemStyle.color = 'red';
        		dd.links[v.dataIndex].lineStyle = { color:"red",width:5 };
        		MD09.init(box[0],dd);
        		$("#head_child").html('('+v.name+')');         
 				// toggleED(rdm(5,12));  这个页面数据更新
        	}
        });
        box.css({left: x+20-box.width()/2, top:y+10-box.height()/2}).show();
	}
})


//模块3： 窗口监控相关
var data = [26, 33, 55, 11, 82];
$.tem3_row3_left_map($('.tem3_row3_left_map')[0],data);   //雷达图
var data = {
    name:['6号窗口', '1号窗口', '2号窗口', '7号窗口', '3号窗口'],
    value:[60, 50, 49, 46, 41]	
}
$.tem3_row3_right_map($(".tem3_row3_right_map")[0],data);  //柱状图


//模块4： 右下角的图形渲染
var data41 = {
	name:['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月','9月','10月','11月','12月'],
	value:[96, 92, 94, 99, 90, 97,98,96,90,97,93,97]
};
var data42 = {
	name:['部门1', '部门2', '部门3', '部门4', '部门5'],
	value:[600, 550, 520, 501, 486]
};
var data43 = {
	name:['事项1', '事项2', '事项3', '事项4', '事项5'],
	value:[600, 550, 520, 501, 486]
};
// $.left_bottom_map($(".left_bottom_map")[0],data42)
$.left_bottom_map($(".left_bottom_map")[0],data41, true)
// $("#tem4_topbar button").click(function(){
// 	$(this).siblings().removeClass("active");
// 	$(this).addClass("active");
// 	var index = $(this).index()+1;
// 	if(index>1){
//         $.left_bottom_map($(".left_bottom_map")[0],window['data4'+index])
// 	}else{
// 		$.left_bottom_map($(".left_bottom_map")[0],data41, true)
// 	}	
// })




//模块5： 中间底部的3个图形渲染
var data = {
	name:['银行1', '银行1', '银行1', '银行1', '银行1', '银行1', '银行1', '银行1', '银行1', '银行1'],
	value:[6723, 6782, 7023, 6158, 8025, 7012, 6352, 7026, 7823, 6998]  
};
$.tem5_yhwd_map($(".tem5_yhwd_map")[0],data)        //----各银行网点历史办件量

var data = {
    name:["中国农业银行","中国人民银行","中国建设银行","中国工商银行","中国交通银行"],
    value:[55, 35, 30,22,20]
};
$.tem5_bjtop5_map($(".tem5_bjtop5_map")[0],data)    //-----办件量最多的银行TOP5
var data = {
    name:["事件111","事件111","事件111","事件111","事件111"],
    value:[55, 35, 30,22,20]
};
$.tem5_sxtop5_map($(".tem5_sxtop5_map")[0],data)    //-----银行网点热门事件TOP5



//模块6： 右下架办事大厅监控
$.tem6_right_bottom_map($(".tem6_right_bottom_map")[0])



//04.福田区svg地图渲染
//svgMap.clear()  清除选中状态
var svgMap = $.svgMap("#svgImg",{
	mouseenter:function(cla,event){
		// console.log(this,cla)
		// $.msgtip("sdfsdf") 
	},
	mouseleave:function(cla,event){
		// console.log(this,cla)
		// $.msgtipClose()
	},
	click:function(cla,event){
    	var n = +cla.replace(/[^0-9]*/g,"");
    	$("#head_child").html('('+area[n-1].tit+')');
    	var current = $("div"+cla);
    	var x = parseFloat(current.css("left"));
    	var y = parseFloat(current.css("top"));
    	console.log(x,y);
    	// toggleED(rdm(5,12));  这个页面数据更新

        var arr = area[n-1].child;
        var list = [];
        var links = [];
        var len = arr.length;
        for(var i=0;i<arr.length;i++){
        	links.push({source: i, target: len });
        	list.push({id: i, category: 1, name: arr[i], symbolSize: 30*KO, draggable: "true",itemStyle:{color: '#00ADF8'}});
        }
        list.push({id: len, category: 1, name:"", symbolSize: 30*KO, draggable: "true",itemStyle:{color: 'rgba(255,255,255,0.5)'}});
        var data = { list:list, links:links };
        var box = $("#shequshow");
        MD09.init(box[0],data).on('click',function(v){
        	if(v.name == ''){
        		box.hide();
        	}else{
        		var dd = JSON.parse(JSON.stringify(data));
        		dd.list[v.dataIndex].itemStyle.color = 'red';
        		dd.links[v.dataIndex].lineStyle = { color:"red",width:5 };
        		MD09.init(box[0],dd);
        		$("#head_child").html('('+v.name+')');         
 				// toggleED(rdm(5,12));  这个页面数据更新
        	}
        });
        box.css({left: x+20-box.width()/2, top:y+10-box.height()/2}).show();
	}
})


</script>